<script setup>
import {computed, ref} from 'vue';
import { Icon,Cell,Calendar,Image } from 'vant';
import request from "@/utils/request";
import axios from "axios";
import router from "@/router";
import {getOssPrefix} from "@/v-api/properties";

const props = defineProps({
  item: Object
});

const items = ref([]);
const date = ref('');
const show = ref(false);
const selectedDate = ref(null);
const searchText = ref('');
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
// 获取数据
request.post('news/', props.item)
    .then(response => {
      items.value = response.data;
    })
    .catch(error => {
      console.error(error);
    });

const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
  selectedDate.value = value;
  console.log('单个日期被选择');
};
// 处理所有日期选择
const handleAllDatesClick = () => {
  selectedDate.value = null;
  console.log('所有日期被选择');
};

// 过滤和格式化项目
const filteredItems = computed(() => {
  // if (!selectedDate.value) return items.value;
  // return items.value.filter(item => {
  //   const itemDate = new Date(item.time);
  //   return itemDate.toDateString() === selectedDate.value.toDateString();
  // });
  let filtered = items.value;

  if (selectedDate.value) {
    filtered = filtered.filter(item => {
      const itemDate = new Date(item.time);
      return itemDate.toDateString() === selectedDate.value.toDateString();
    });
  }

  const searchValue = searchText.value.trim().toLowerCase();
  if (searchValue) {
    filtered = filtered.filter(item => {
      return item.title.toLowerCase().includes(searchValue);
    });
  }

  return filtered;
});

const formattedItems = computed(() => {
  return filteredItems.value.map(item => {
    if (item.time) {
      const [datePart, timePart] = item.time.split('T');
      const url = getOssPrefix()+item.iconUrl;
      return {
        ...item,
        iconUrl: url,
        time: `${datePart} ${timePart}`,
      };
    }
    return item;
  });
});
</script>

<template>
  <td class="date-cell">
    <Cell title="选择单个日期" :value="date" @click="show = true" title-style="font-size: 16px"/>
  </td>
  <td class="all-dates-cell">
    <Cell title="选择所有日期" @click="handleAllDatesClick" title-style="font-size: 16px"/>
  </td>
  <Calendar
      v-model:show="show"
      @confirm="onConfirm"
      color="#d9f2ac"
      :min-date="new Date(2024, 5, 1)"
      :show-confirm="false"
      :show-mark="false"
  />
  <div class="list">
    <div class="card-container" v-for="item in formattedItems" :key="item.id" @click="router.push({ name:'newsdetail', params: { title: item.title, time: item.time, content: item.content, iconUrl: item.iconUrl, username:item.username }})">
      <div class="card-header">
        <h1 class="card-title">{{ item.title }}</h1>
      </div>
      <div class="card-body">
        <p class="card-text">{{ item.content }}</p>
      </div>
      <div class="card-footer">
        <div class="user-icon-container">
          <Image
              round
              width="35px"
              height="35px"
              style="border: 1px solid #1e1f22"
              :src="item.iconUrl"
          />
          <span class="card-name">{{ item.username }}</span>
        </div>
        <span class="card-time">{{ item.time }}</span>
      </div>
    </div>
  </div>
  <van-search
      shape="round"
      v-model="searchText"
      background="#ffffff"
      placeholder="请输入搜索关键词"
      class="fixed-search"
  />
</template>

<style scoped>
.user-icon-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 左右相隔 30px */
}

.list {
  height: 580px; /* 设置高度为页面可视区域的100% */
  overflow-y: scroll; /* 设置垂直方向的滚动条 */
  background-color: #d9f2ac; /* 设置背景颜色 */
  /* //padding: 10px; 设置内边距 */
}

.card-container {
  margin: 10px; /* 容器的外边距 */
  background-color: #ffffff; /* 容器的背景色 */
  padding: 10px; /* 容器的内边距 */
  box-sizing: border-box; /* 包括内边距在宽度内 */
  border-radius: 10px; /* 设置圆角半径为10px */
  border: 1px solid #1e1f22; /* 设置边框样式 */
}

.card-header {
  height: 40px; /* 固定头部高度 */
  margin-bottom: 2px; /* 头部下方的间距 */
  overflow: hidden; /* 防止标题溢出 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出用省略号表示 */
}

.card-title {
  font-size: 18px; /* 标题字体大小 */
  margin: 0; /* 重置标题的默认外边距 */
  overflow: hidden; /* 防止标题溢出 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出用省略号表示 */
  color: #1e1f22;
}

.card-body {
  height: 50px; /* 固定主体高度 */
  margin-bottom: 2px; /* 主体下方的间距 */
  overflow: hidden; /* 防止溢出 */
}

.card-text {
  margin: 0; /* 重置文字的默认外边距 */
  overflow: hidden; /* 防止文字溢出 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出用省略号表示 */
  font-size: 14px;
  color: #6a6c6e;
}

.card-image {
  width: 100%; /* 图片宽度 */
  height: auto; /* 保持图片的宽高比 */
  margin-bottom: 10px; /* 图片下方的间距 */
}

.card-footer {
  height: 30px; /* 固定底部高度 */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 图标和时间左右对齐 */
  align-items: center; /* 垂直居中 */
}

.card-time {
  font-size: 16px;
}

.card-name {
  font-size: 16px;
}

.date-cell {
  width: 64%; /* 2/3 of the total width */
}
.all-dates-cell {
  width: 38%; /* 1/3 of the total width */
}

.fixed-search {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* Adjust z-index as needed */
}
</style>